<template>
  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
    <tree
      ref="treeRef"
      :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']"
      :treeData="treeData"
      :treeLoading="treeLoading"
      @tree-select="onTreeSelect"
      @reset-form="resetForm(formRef)"
    />
    <div
      :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']"
    >
      <RePvTable
        ref="tableRef"
        :api="api"
        :auth="auth"
        :edit-form="editForm"
        :table-columns="columns"
        :diy-unfold="true"
        :is-search="true"
        locale-name="staff"
        @plusReset="treeRef.onTreeReset()"
      >
        <template #extOperation="{ row, size }">
          <el-dropdown>
            <el-button
              class="ml-3 mt-[2px]"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(More)"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button
                    v-auth="'upload_icon'"
                    :class="buttonClass"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(Upload)"
                    @click="handleUpload(row)"
                  >
                    上传头像
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-auth="'reset_pass'"
                    :class="buttonClass"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(Password)"
                    @click="handleReset(row)"
                  >
                    重置密码
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-auth="'assign_role'"
                    :class="buttonClass"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(Role)"
                    @click="handleRole(row)"
                  >
                    分配角色
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </RePvTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import tree from "./tree.vue";
import { useStaff } from "./utils/hook";
import { RePvTable } from "@/components/RePvTable";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Upload from "@iconify-icons/ri/upload-line";
import Role from "@iconify-icons/ri/admin-line";
import Password from "@iconify-icons/ri/lock-password-line";
import More from "@iconify-icons/ep/more-filled";

defineOptions({
  name: "Staff"
});

const treeRef = ref();
const formRef = ref();
const tableRef = ref();

const {
  api,
  auth,
  columns,
  deviceDetection,
  treeData,
  treeLoading,
  resetForm,
  onTreeSelect,
  editForm,
  buttonClass,
  handleUpload,
  handleReset,
  handleRole
} = useStaff(tableRef, treeRef);
</script>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-button:focus-visible) {
  outline: none;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
